<template>
  <Modal
    v-model="modalShow"
    :title="$t('请先设置支付密码')"
    footer-hide
    width="500"
  >
      <div class="name-wrap">
        <selectCountryList/>
        <Input class="password-input" v-model="phone" disabled :placeholder="$t('请输入您的手机号')" />
      </div>
      <div class="name-wrap">
        <Input class="password-input" v-model="smsCode" maxlength="6" :placeholder="$t('请输入验证码')" />
        <span class="send-code" @click="sendSmsCode()">{{$t('发送验证码')}}</span>
      </div>
      <div class="name-wrap">
        <Input class="password-input" type="password" maxlength="6" v-model="payPwd" :placeholder="$t('请输入支付密码')+`(6 digits)`" />
      </div>
      <div class="name-wrap">
        <Input class="password-input" type="password" maxlength="6" v-model="payPwdA" :placeholder="$t('请确认密码')" />
      </div>
    <div class="modal-bottom">
      <Button @click="onCancel">{{$t('取消')}}</Button>
        <Button type="error" @click="onConfirm">{{$t('提交')}}</Button>
    </div>
  </Modal>
</template>
<script>
import { mapState } from "vuex"
import mixins from './mixins.js';
export default {
  name: "PayPassword",
  mixins:[mixins],
  data() {
    return {
      modalShow: false,
      phone: "",
      smsCode: "",
      payPwd: "",
      payPwdA: "",
    };
  },
  created(){
    this.type = 5
    this.phone = this.userInfo.phone

  },
  components:{
    selectCountryList:()=>import('./countryList.vue')
  },
  computed:{
    ...mapState(['nationCodeData','userInfo'])
  },
  methods: {
    handleRender() {
      this.modalShow = true;
    },
    sendSmsCode(){
      const {
        phone,
        type,
        nationCodeData:{country_code}
        } = this
      this.$http.getSmsCode({type,phone,country_code}).then(res=>{
        const {status,mess} = res
        if(status===200){
          this.$Message.success({
            content:mess,
            duration: 4,
            closable: true
         });
        }
      })
    },
    onConfirm(){
      const {  name,
        phone,
        smsCode:code,
        payPwd,
        payPwdA} = this
      if(!phone){
        return  this.$Message.error(this.$t('请输入手机号'))
      }
      if(!/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(phone)){
        return  this.$Message.error(this.$t('请输入正确的手机号'))
      }
      if(!code){
        return  this.$Message.error(this.$t('请输入验证码'))
      }
      if(!payPwd){
        return  this.$Message.error(this.$t('请输入支付密码'))
      }
      if(payPwd!==payPwdA){
        return this.$Message.error(this.$t('两次输入的密码不一致'))
      }
      this.$http.setPayPwd({
        phone,
        pay_pwd:payPwd,
        code
      }).then(res=>{
        if(res.status===200){
          this.$Message.success(res.mess)
          this.modalShow= false
        }
      })
    },

    onCancel(){
      this.reset()
      this.modalShow = false;
    },
    reset(){
      this.phone=''
      this.payPwd=''
      this.payPwdA=''
      this.smsCode= ''

    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/common.scss";
.name-wrap {
  @include flex($jc: space-between);
  flex-wrap: nowrap;
  border: 1px solid #dcdee2;
  margin: 14px 0;
}
.password-input {

  /deep/ .ivu-input {
    height: 40px;
    border: none;
  }
  &-detail{
    /deep/ .ivu-input {
      height: 110px;
    }
  }
}
.send-code{
  flex-shrink: 0;
  margin-right: 10px;
}
.ivu-btn-error{
  height: 32px;
}
/deep/ .ivu-modal-header-inner{
  border:none;
  margin-top: 10px;
}
/deep/ .ivu-modal-footer {
  .ivu-btn-primary {
    background-color: #e2231a;
    border: none;
    border-radius: 0;
  }
}
.modal-bottom{
    text-align:right;
  margin-top: 20px;
}
</style>
